<template>
  <div class="view-container">
    <div class="filter-container">
      <el-row :gutter="40">
        <el-col :lg="24">
          <el-form
            :inline="true"
            :model="queryParams"
            label-position="right"
            size="small"
            class="filter-form-inline"
          >
            <el-row
              :gutter="40"
              style="margin-left: 0px; margin-right: 0px"
            >
              <el-col
                :lg="6"
                :xs="8"
              >
                <el-form-item
                  label="创建时间"
                  style="width: 100%"
                >
                  <date-range-picker
                    v-model:date="queryParams.date"
                    style="width: 100%"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="handlDate"
                  />
                </el-form-item>
              </el-col>
              <el-col
                :lg="6"
                :xs="8"
              >
                <el-form-item
                  label="企业所在地"
                  style="width: 100%"
                >
                  <el-cascader
                    v-model="queryParams.value"
                    :popper-append-to-body="false"
                    style="width:100%"
                    placeholder="请选择地区"
                    :options="citys"
                    :props="{ value:'regionCode',label:'regionName' }"
                    @change="handlAreas"
                  />
                </el-form-item>
              </el-col>
              <el-col
                :lg="6"
                :xs="8"
              >
                <el-form-item
                  label="关键字"
                  style="width: 100%"
                >
                  <el-input
                    v-model="queryParams.selectStr"
                    clearable
                    placeholder="输入名称、编号、代征码、所在地区、详细地址"
                  />
                </el-form-item>
              </el-col>
              <el-col
                :lg="4"
                :xs="4"
              >
                <el-form-item style="width: 100%">
                  <el-button
                    class="border-btn"
                    @click="handlReset"
                  >重置
                  </el-button>
                  <el-button
                    type="primary"
                    class="main-btn"
                    @click="handlSearch"
                  >搜索
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div class="main-content" style="padding-top: 0">
      <div class="list-container">
        <!--        <table-tools>-->
        <!--          <template #left>-->
        <!--            <el-button-->
        <!--              class="main-btn"-->
        <!--              size="small"-->
        <!--              type="primary"-->
        <!--              @click="handlNew"-->
        <!--            >新建-->
        <!--            </el-button>-->
        <!--          </template>-->
        <!--        </table-tools>-->
        <table-view
          :data="tableData"
          header-cell-class-name="table-header"
          size="medium"
          border
          :cell-style="cellStyle"
          @sort-change="handlSort"
          @row-click="aloneClick"
        >
          <el-table-column
            prop="agentNumber"
            label="代理商编号"
            header-align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="agentName"
            label="代理商名称"
            header-align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="creditCode"
            label="统一社会信用代码"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="region"
            label="企业所在地区"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template #default="{row}">
              {{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="详细地址"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="createdAt"
            label="创建时间"
            sortable="custom"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template #default="{row}">
              {{ dateFormat("yyyy-mm-dd HH:MM:SS",row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="terminalStatus"
            label="状态"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template #default="{row}">
              <div style="line-height: 20px">正常</div>
              <div
                v-if="row.flowStatus!=='AGREE'"
                style="line-height: 20px"
              >{{ getLabel('approval_result',row.flowStatus) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template #default="{row}">
              <template
                v-if="row.flowStatus ==='REFUSE' || row.flowStatus ==='REPEAL' || row.flowStatus ==='REJECT' || row.flowStatus === ''"
              >
                <el-button
                  type="text"
                  @click="handlChange(row)"
                >变更
                </el-button>
                <el-button
                  type="text"
                  @click="handlSigning(row.id)"
                >签约开户
                </el-button>
              </template>
            </template>
          </el-table-column>
        </table-view>
      </div>

      <Pagination
        v-model:page="queryParams.page"
        v-model:limit="queryParams.pageSize"
        style="display: flex; justify-content: flex-end"
        :total="total"
        @pagination="handlList"
      />
    </div>

    <!--新建潜在代理商 -->
    <agentDialog
      ref="agentDialog"
      :type-title="typeTitle"
      @succsess="succsess"
    />
    <!--新建签约开户 -->
    <formSign
      ref="formSign"
      @succsessFormSign="succsessFormSign"
    />
  </div>
</template>

<script>
import {defineAsyncComponent, inject, onMounted, reactive, toRefs,} from 'vue'
import {useRouter} from 'vue-router'
import areas from '@/utils/area.js'

export default {
  name: 'AgentList',
  components: {
    agentDialog: defineAsyncComponent(() =>
      import('../modules/potentialAgent/agentDialog.vue')
    ),
    formSign: defineAsyncComponent(() =>
      import('../modules/potentialAgent/formSign.vue')
    ),
  },
  setup() {
    const api = inject('api')
    const router = useRouter()
    var data = reactive({
      queryParams: {
        selectStr: '',
        pageSize: 20,
        page: 1,
        date: [],
        startTime: null,
        endTime: null,
        value: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
      },
      citys: areas,
      tableData: [],
      total: 0,
      agentDialog: null,
      formSign: null,
      typeTitle: '',
    })

    // 新建
    const handlNew = () => {
      data.typeTitle = '新建潜在代理商'
      setTimeout(() => {
        data.agentDialog.open(null)
      }, 100)
    }

    const handlDate = (val) => {
      data.queryParams.startTime = val[0]
      data.queryParams.endTime = val[1]
    }

    const handlAreas = (val) => {
      if (val) {
        data.queryParams.provinceCode = val[0]
        data.queryParams.cityCode = val[1]
        data.queryParams.areaCode = val[2]
      }
    }

    // 获取列表
    const handlList = () => {
      api.channelAgent.POTENTIALAGENT_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || []
          data.total = res.data.total
        }
      })
    }

    // 刷新列表
    const succsess = () => {
      handlList()
    }

    const succsessFormSign = () => {
      handlList()
    }

    const handlReset = () => {
      data.queryParams = {
        selectStr: '',
        pageSize: 20,
        page: 1,
        date: [],
        startTime: null,
        endTime: null,
        value: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
      }
      handlList()
    }

    // 搜索
    const handlSearch = () => {
      data.queryParams.page = 1
      handlList()
    }

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === '操作' || column.label === '查看文件') return
      router.push({
        path: '/channel/potentialAgentDetail',
        query: { id: row.id },
      })
    }

    // 鼠标样式
    const cellStyle = () => {
      return 'cursor:pointer;'
    }

    // 变更
    const handlChange = (row) => {
      data.typeTitle = '变更潜在代理商'
      setTimeout(() => {
        data.agentDialog.open(row)
      }, 100)
    }

    // 签约开户
    const handlSigning = (id) => {
      data.formSign.open(id)
    }
    // 排序
    const handlSort = (row) => {
      if (row.column) {
        if (row.column.label === '创建时间') {
          switch (row.order) {
            case 'ascending':
              data.queryParams.createdSort = 'asc'
              break
            case 'descending':
              data.queryParams.createdSort = 'desc'
              break
          }
        }
      }
      handlList()
    }

    //* **************************************
    onMounted((_) => {
      handlList()
    })
    //* **************************************
    return {
      ...toRefs(data),
      handlReset,
      handlSearch,
      handlNew,
      aloneClick,
      cellStyle,
      handlChange,
      handlSigning,
      handlList,
      succsess,
      succsessFormSign,
      handlSort,
      handlAreas,
      handlDate,
    }
  },
}
</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>
